<template>
	<permissionDialog ref="permissionDialogRef" width="600" :beforeClose="permissionCancel">
		<el-form label-width="auto" ref="permissionFormRef" :model="permissionForm" :rules="permissionRule">
			<!-- 静态表单 -->
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="上级权限" prop="pid" class="">
						<el-tree-select
							v-model="permissionForm.pid"
							:data="addRoot_FullPermissionTree"
							:props="{ label: 'permission_name', value: '_id', children: 'children' }"
							check-strictly
							clearable
							placeholder="请选择上级权限"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="权限类型" prop="type">
						<el-select v-model="permissionForm.type" @change="changePermissionType" placeholder="请选择权限类型">
							<el-option label="目录" value="catalogue" />
							<el-option label="菜单" value="menu" />
							<el-option label="资源" value="resource" />
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="权限名称" prop="permission_name">
						<el-input v-model="permissionForm.permission_name" placeholder="请输入权限名称" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="权限状态" prop="status">
						<el-select v-model="permissionForm.status" placeholder="请选择权限状态">
							<el-option label="启用" value="enable" />
							<el-option label="禁用" value="disable" />
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="权限排序" prop="sort">
						<el-input placeholder="请输入权限排序" v-model="permissionForm.sort" clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<!-- 分割线 -->
			<el-divider></el-divider>

			<!-- 动态表单 -->
			<el-row :gutter="20">
				<!-- 权限标识 -->
				<el-col :span="12" v-if="permissionForm.type !== 'catalogue'">
					<el-form-item prop="key">
						<template #label>
							<div class="questionLabelContainer">
								<p>权限标识</p>
								<el-tooltip content="前后端可根据该标识判断权限."
									><el-icon><QuestionFilled /></el-icon>
								</el-tooltip>
							</div>
						</template>

						<el-input placeholder="请输入权限标识" v-model="permissionForm.key" clearable></el-input>
					</el-form-item>
				</el-col>
				<!-- 路由别名 -->
				<el-col :span="12" v-if="permissionForm.type !== 'resource'">
					<el-form-item prop="name">
						<template #label>
							<div class="questionLabelContainer">
								<p>路由别名</p>
								<el-tooltip content="对应VueRouter中的name属性.">
									<el-icon><QuestionFilled /></el-icon>
								</el-tooltip>
							</div>
						</template>

						<el-input placeholder="请输入路由别名" v-model="permissionForm.name" clearable></el-input>
					</el-form-item>
				</el-col>
				<!-- 路由路径 -->
				<el-col :span="12" v-if="permissionForm.type !== 'resource'">
					<el-form-item prop="path">
						<template #label>
							<div class="questionLabelContainer">
								<p>路由路径</p>
								<el-tooltip content="对应VueRouter中的path属性：一级格式：/user，二级格式：/user/xxx">
									<el-icon><QuestionFilled /></el-icon>
								</el-tooltip>
							</div>
						</template>

						<el-input placeholder="请输入路由路径" v-model="permissionForm.path" clearable></el-input>
					</el-form-item>
				</el-col>
				<!-- 组件路径 -->
				<el-col :span="12" v-if="permissionForm.type !== 'resource'">
					<el-form-item label="组件路径" prop="component" :required="permissionForm.type === 'menu'">
						<template #label>
							<div class="questionLabelContainer">
								<p>组件路径</p>
								<el-tooltip
									content="对应VueRouter中的component属性：假如路径为 @/view/user/index.vue 则只需要输入 /user/index | 目录类型是可选的,在使用Layout布局时可传入."
								>
									<el-icon><QuestionFilled /></el-icon>
								</el-tooltip>
							</div>
						</template>

						<el-input placeholder="请输入组件路径" v-model="permissionForm.component" clearable></el-input>
					</el-form-item>
				</el-col>
				<!-- 是否隐藏 -->
				<el-col :span="12" v-if="permissionForm.type !== 'resource'">
					<el-form-item prop="hidden">
						<template #label>
							<div class="questionLabelContainer">
								<p>是否隐藏</p>
								<el-tooltip content="如果设置为隐藏, 则不展示在左侧菜单栏, 但是仍然通过导航式路由跳转进行正常访问.">
									<el-icon><QuestionFilled /></el-icon>
								</el-tooltip>
							</div>
						</template>

						<el-select v-model="permissionForm.hidden" placeholder="请选择是否展示">
							<el-option label="是" :value="true" />
							<el-option label="否" :value="false" />
						</el-select>
					</el-form-item>
				</el-col>
				<!-- 是否缓存 -->
				<el-col :span="12" v-if="permissionForm.type === 'menu'">
					<el-form-item label="是否缓存" prop="keepAlive">
						<template #label>
							<div class="questionLabelContainer">
								<p>是否缓存</p>
								<el-tooltip content="如果设置为缓存, 请在setup语法糖后添加name属性, 并且值需要和该表单中的路由别名相同.">
									<el-icon><QuestionFilled /></el-icon>
								</el-tooltip>
							</div>
						</template>

						<el-select v-model="permissionForm.keepAlive" placeholder="请选择是否缓存">
							<el-option label="是" :value="true" />
							<el-option label="否" :value="false" />
						</el-select>
					</el-form-item>
				</el-col>
				<!-- 是否外链 -->
				<el-col :span="12" v-if="permissionForm.type === 'menu'">
					<el-form-item label="是否外链" prop="isLink">
						<el-select v-model="permissionForm.isLink" placeholder="请选择是否外链">
							<el-option label="是" :value="true" />
							<el-option label="否" :value="false" />
						</el-select>
					</el-form-item>
				</el-col>
				<!-- 外链地址 -->
				<el-col :span="12" v-if="permissionForm.type === 'menu' && permissionForm.isLink">
					<el-form-item label="外链地址" prop="url">
						<el-input placeholder="请输入外链地址" v-model="permissionForm.url" clearable></el-input>
					</el-form-item>
				</el-col>
				<!-- 设置图标 -->
				<el-col :span="12" v-if="permissionForm.type !== 'resource'">
					<el-form-item label="设置图标" prop="icon">
						<el-input placeholder="请输入图标名称" v-model="permissionForm.icon" clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</permissionDialog>
</template>

<script setup>
import { ref, computed } from "vue";
import permissionDialog from "@/components/confirmDialog/index.vue";
import { addPermissionApi, editPermissionApi } from "@/api/system/permission";

const props = defineProps({
	fullPermissionTree: { type: Array, required: true },
});
const emit = defineEmits(["upTreeData"]);
// 为传递过来的props.fullPermissionTree添加根节点
const addRoot_FullPermissionTree = computed(() => {
	return [{ _id: "root", permission_name: "根目录", children: props.fullPermissionTree }];
});

// 权限DialogRef
const permissionDialogRef = ref();
const permissionCancel = () => {
	permissionFormRef.value.resetFields();
	permissionFormRef.value.clearValidate();

	permissionForm.value = { ...staticVar, ...asyncVar };
};
const currentPermissionDialogType = ref("add");

// 权限表单数据
const permissionFormRef = ref();
// 静态和动态变量, 每次更改权限类型时,动态变量都应该重置.
const staticVar = { pid: undefined, type: "catalogue", status: "enable", sort: 1 };
const asyncVar = { key: "", name: "", path: "", component: "", hidden: false, keepAlive: false, isLink: false, url: "", icon: "" };
const permissionForm = ref({ ...staticVar, ...asyncVar });
const permissionRule = {
	permission_name: [{ required: true, message: "请输入权限名称", trigger: "blur" }],
	pid: [{ required: true, message: "请选择父级权限", trigger: "blur" }],
	sort: [{ required: true, message: "请输入权限排序", trigger: "blur" }],
	key: [{ required: true, message: "请输入权限标识", trigger: "blur" }],
	name: [{ required: true, message: "请输入路由别名", trigger: "blur" }],
	path: [{ required: true, message: "请输入路由名称", trigger: "blur" }],
	component: [
		{
			validator: (rule, value, callback) => {
				if (permissionForm.value.type === "menu" && value === "") return callback(new Error("请输入路由路径"));
				return callback();
			},
		},
	],
	url: [{ required: true, message: "请输入外链地址", trigger: "blur" }],
	icon: [{ required: true, message: "请输入图标名称", trigger: "blur" }],
};
// 修改权限类型时, 重置表单内容
const changePermissionType = () => {
	permissionFormRef.value.clearValidate();
	permissionForm.value = { ...permissionForm.value, ...asyncVar };
};

defineExpose({
	open: ({ type = "add", data } = {}) => {
		currentPermissionDialogType.value = type;

		permissionDialogRef.value.open({
			title: "权限操作",
			isAsync: true,
			openAfter: () => {
				if (type === "edit") permissionForm.value = { ...data };
			},
			confirm: async ({ stopLoading, done }) => {
				// 校验表单
				try {
					await permissionFormRef.value.validate();
				} catch (e) {
					return stopLoading();
				}

				// 发起请求
				try {
					if (type === "add") await addPermissionApi(permissionForm.value);
					if (type === "edit") await editPermissionApi(permissionForm.value);

					done();
				} catch (e) {
					return stopLoading();
				}

				emit("upTreeData");
			},
			cancel: () => {},
		});
	},
});
</script>

<style scoped lang="scss">
.questionLabelContainer {
	display: flex;
	align-items: center;
	gap: 5px;
}
</style>
